<extend name="Base/common"/>
<block name="TITLE"><title>退货申请表</title></block>

<block name="body">    
    <div class="am-container " >   
        <form class="am-form "  id="rejectform"  action="{:U('Reject/saveReject')}" enctype="multipart/form-data" method="post">
            <div style="margin-top: 10px;">  
                <div class="am-form-group ">                
                    <label for="username" class="am-form-label lable_font" ><i class="am-icon-user"></i>&nbsp;用户姓名</label>
                     <input type="text" id="username" name="username" class="am-form-field am-radius"  value='{$realname}'  required>                    
                </div>
                <div class="am-form-group " >                
                    <label for="usertel" class=" am-form-label lable_font"><i class="am-icon-phone"></i>&nbsp;联系方式</label>
                    <input type="text" id="usertel" name="usertel" class="am-form-field am-radius js-pattern-mobile" value='{$phone}'  required>                    
                </div>
               <div class="am-form-group " >                
                    <label for="usertel" class=" am-form-label lable_font"><i class="am-icon-home"></i>&nbsp;商铺地址</label>
                    <input type="text" id="usertel" name="useraddr" class="am-form-field am-radius js-pattern-mobile" value='{$addr}'  required>                    
                </div>
                <div class="am-form-group " >                
                    <label for="worksname" class="am-form-label lable_font"><i class="am-icon-leaf"></i>&nbsp;可以退换的商品列表</label>
                     <br/>   
                     <volist id="rejectinfo" name="rejectinfo" empty="没有可以退换的商品">
                         <div class="am-margin-top-lg rejectgoodinfo" data-name='{$rejectinfo.name}' data-id="{$rejectinfo.orderid}" style="display: inline;"> <d class="rejectgoodname" style="color:#0E90D2;">{$rejectinfo.name}</d><div  class="am-btn-danger am-btn-sm am-radius" style="float: right;display: inline">&nbsp;&nbsp;我要退货+&nbsp;&nbsp;</div> </div><br/>
                    </volist>
                     <br/>
                     <div id="rejectdetail">
                        <label for="rejectdetail" class="am-form-label lable_font"><i class="am-icon-list"></i>&nbsp;退货单明细<d style="font-size: 10px;color:#F37B1D;">(点击上面列表选取)</d></label><br/>
                        
                     </div>
                </div>
<!--                  <div class="am-form-group " >                
                    <label for="workspicture" class="am-form-label lable_font">&nbsp;作品图片</label>
                    <div id="uploader" >
                        <div class="queueList" style='margin: 5px;margin-left: 0px;'>
                            <input type="file" name="pic1" />(选填)  
                            <input type="file" name="pic2" />(选填)    
                            <input type="file" name="pic3" />(选填)                            
                    </div>                     
                </div>  -->
                            <div class="am-modal am-modal-prompt" tabindex="-1" id="my-prompt">
                                <div class="am-modal-dialog">
                                    <div class="am-modal-hd " id="promt-goodname"></div>
                                    <div class="am-modal-hd " style="opacity:0;max-height: 0.5px;" id="promt-goodorder"></div>
                                    <div class="am-modal-bd" id=""> 
                                        请填写退货数量或斤重
                                      <input type="text" class="am-modal-prompt-input">
                                    </div>
                                    <div class="am-modal-footer">
                                        <span class="am-modal-btn" data-am-modal-cancel>取消</span>
                                        <span class="am-modal-btn" data-am-modal-confirm>确定</span>
                                    </div>
                                </div>
                            </div>
                
                            <div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
                                <div class="am-modal-dialog">
                                  <div class="am-modal-hd">温馨提示</div>
                                  <div class="am-modal-bd">
                                    您的退货信息不完整
                                  </div>
                                  <div class="am-modal-footer">
                                    <span class="am-modal-btn">确定</span>
                                  </div>
                                </div>
                            </div> 

                             <div class="am-modal am-modal-alert" tabindex="-1" id="my-alert2">
                                <div class="am-modal-dialog">
                                  <div class="am-modal-hd">温馨提示</div>
                                  <div class="am-modal-bd">
                                    每件退货商品都需要一张图片
                                  </div>
                                  <div class="am-modal-footer">
                                    <span class="am-modal-btn">确定</span>
                                  </div>
                                </div>
                            </div> 


                            <div class="am-modal am-modal-loading am-modal-no-btn" tabindex="-1" id="my-modal-loading2">
                                <div class="am-modal-dialog">
                                  <div class="am-modal-hd">正在上传图片...</div>
                                  <div class="am-modal-bd">
                                    <span class="am-icon-spinner am-icon-spin"></span>
                                  </div>
                                </div>
                            </div>    
                   

                <div class="am-form-group" style='clear: both;' >                
                    <label for="describe" class="am-form-label lable_font"> <i class="am-icon-file"></i> &nbsp;退换商品描述</label>
                    <textarea class=" am-radius " rows="3" id="describe" name="describe"  required ></textarea>  
                </div>                
            </div>
            <p style='text-align: center'><input type="submit" id="submit" class="am-btn am-btn-default am-round" value="提交申请"></p>
       </form>
    </div>
</block>
<block name="script">
    <script>
        
        $('#submit').click(function(){
            var goods_num=$('.good_info').length;
            var goods_pic_num=$('.am-badge').length;
            var username = $('#username').val();
            var usertel = $('#usertel').val();
            var useraddr = $('#useraddr').val();
            var desciribe = $('#desciribe').val();
           var good_name_condition=($(".good_name").val());
            if(desciribe==""||usertel==""||useraddr==""||desciribe==""||username==""||good_name_condition==undefined||good_name_condition==""){
                      $('#my-alert').modal({
                            relatedTarget: $(this),
                            onConfirm: function (e) {
                                 return false;
                            }
                      });
                return false;   
            }else if(goods_num>goods_pic_num){
                   $('#my-alert2').modal({
                            relatedTarget: $(this),
                            onConfirm: function (e) {
                                 return false;
                            }
                      });
                 return false;      
            }else{
                $('#my-modal-loading2').modal({
                       relatedTarget: $(this)
                 }); 
                 $("#rejectform").submit();
  
            }     
          
        });
    $(function() {
        $('.rejectgoodinfo').on('click', function() {
            var $good=$(this);
            var goodname=$good.data('name');
            var goodorder=$good.data('id');
            $("#promt-goodname").html(goodname);
             $("#promt-goodorder").html(goodorder);
            $('#my-prompt').modal({
                    relatedTarget: $(this),
                    onConfirm: function (e) {
                         if (e.data == "") {
                                return false;
                            }
                            
                        $("#rejectdetail").append("<d><p class='delete good_info'><i class='am-icon-close' style='color:red;font-size:20px;'>\n\
                                                    </i><d style='color:#DD514C;font-weight:700;'>"+$("#promt-goodname").html()+"</d><d style='float:right;font-size:10px;margin-top:5px;'>&nbsp;数量:"
                                                    +e.data+"&nbsp</d><br/><d  class='' style='font-size:8px;'>原订单:"
                                                    +$("#promt-goodorder").html()+"</d><input type='hidden' name='good_name[]' class='good_name' value='"+$("#promt-goodname").html()
                                                    +"' /><input type='hidden' name='good_num[]' class='good_num' value='"+e.data+"'/><input type='hidden' name='good_order[]' class='good_order' value='"
                                                    +$("#promt-goodorder").html()+"'/><br/><div class='am-form-file' style='max-width:120px;important!'><button type='button' class='am-btn am-btn-danger am-btn-sm'><i class='am-icon-cloud-upload'></i> 请上传图片</button><input class='doc-form-file' type='file' name='pic[]' ><d></d></div></p></d>");
                        $('.am-icon-close').bind('click', function() {
                               $(this).parent().parent().remove();
                        }); 
                        $('.doc-form-file').bind('change', function() {
                                var fileNames = '';
                                var file=this.files[0];
                                fileNames += '<span class="am-badge">' + file.name + '</span> ';
                                $(this).next('d').html(fileNames);  
                        });
                    },
                    onCancel: function (e) {
                    }
                });
        });
        $('.delete').on('click', function() {
                     $(this).remove(); 
            
        });
  });
    </script>      
</block>